<template>
  <!--弹出窗-->
  <modal ref="modal_1" :title="title" :isCloseConfirm="this.editable" :fullscreen="this.fullscreen" top="5%" width="80%"
         :close-on-click-modal="true" @modalOpened="opened" @modalClose="closed">


    <avue-form :option="option" ref="form" v-model="form" @submit="onSubmit" >
      <template #materialNo v-if="this.editable">
        <el-input v-model="form.materialNo" readonly placeholder="请选择物料编号" @click="selectMaterialNo" :disabled="!!this.form.id"/>
      </template>
    </avue-form>
    <!--底部按钮块, 默认只有"取消"按钮-->
    <template #footerButton>
      <el-button type="primary" v-if="(permission.order_add || permission.order_edit) && editable"
                 :loading="btnLoading" @click="saveAdd">保 存
      </el-button>
      <el-button type="warning" v-if="(permission.order_add || permission.order_edit) && editable"
                 :loading="btnLoading" @click="saveAddNext">保存并新增下一条
      </el-button>
      <el-button @click="$refs.modal_1.handleClose()">关闭</el-button>
    </template>
    <select-prod  ref="selectProd" @success="setProd" />
  </modal>
</template>

<script>
    import { getList, getDetail, add, update, remove } from "@/api/anwise/order/order_item";
    import { mapGetters } from "vuex";
    import { getDeptTree } from '@/api/system/dept';
    import website from '@/config/website';
    import {Pattern} from "@/utils/validate.js";
    import {dateFormat} from "@/utils/date.js";
    import selectProd from './select_prod.vue';

    export default {
        components: {
            selectProd
        },
        data() {
            return {
                salesDate:'',
                customerId:"",
                emits: ["success"],
                editable: false,
                title: "订单项信息",
                isCloseConfirm: false,
                fullscreen: false,
                btnLoading: false,
                form: {},
                query: {},
                loading: true,
                option: {
                    card: true,
                    tabs: true,
                    tabsActive: 1,
                    height: 'auto',
                    calcHeight: 30,
                    labelWidth: 150,
                    menuWidth: 120,
                    submitBtn: false,
                    emptyBtn: false,
                    column: [
                        // {
                        //     label: "订单编号",
                        //     prop: "idNo",
                        //     type: "input",
                        //     span:8,
                        //     disabled:true,
                        // },
                        {
                            label: "物料编号",
                            prop: "materialNo",
                            type: "input",
                            span:8,
                            rules: [{
                                required: true,
                                message: "请输入物料编号",
                                trigger: "blur"
                            }],
                        },
                        {
                            label: "物料名称",
                            prop: "materialName",
                            type: "input",
                            span:8,
                            rules: [{
                                required: true,
                                message: "请输入物料名称",
                                trigger: "blur"
                            }],
                        },
                        {
                            label: "规格",
                            prop: "materialType",
                            type: "input",
                            span:8,
                            rules: [{
                                required: true,
                                message: "请输入规格",
                                trigger: "blur"
                            }],
                        },
                        // {
                        //     label: "规格",
                        //     prop: "materialType",
                        //     type: "select",
                        //     filterable:true,
                        //     span:8,
                        //     dicUrl: "/blade-system/dict-biz/dictionary?code=material_s_type",
                        //     width:120,
                        //     props: {
                        //         label: 'dictValue',
                        //         value: 'dictValue',
                        //     },
                        //     dataType: 'string',
                        //     rules: [{
                        //         required: true,
                        //         message: "请选择规格",
                        //         trigger: "blur"
                        //     }],
                        // },
                        {
                            label: "客户条码",
                            prop: "barCode",
                            type: "input",
                            span:8,
                            rules: [{
                                required: true,
                                message: "请输入客户条码",
                                trigger: "blur"
                            }],
                        },
                        {
                            label: "描述说明",
                            prop: "materialDesc",
                            type: "input",
                            span:8,
                        },
                        {
                            label: "单位",
                            prop: "unit",
                            type: "input",
                            span:8,
                            rules: [{
                                required: true,
                                message: "请输入单位",
                                trigger: "blur"
                            }],
                        },
                        {
                            label: "数量",
                            prop: "num",
                            type: "input",
                            span:8,
                            change : (e)=>{
                                this.handleTotalPrice(e.value,this.form.price, 1)
                            },
                            rules: [{
                                required: true,
                                message: "请输入数量",
                                trigger: "blur"
                            },{
                                pattern: Pattern.number_1,
                                message: '请输入大于0的整数',
                                trigger: 'blur',
                            }],
                        },
                        {
                            label: "单价/100",
                            prop: "price",
                            type: "number",
                            span:8,
                            min:0,
                            max:999999999,
                            precision:2,
                            controls:false,
                            change : (e)=>{
                                this.handleTotalPrice(this.form.num,e.value)
                            },
                            rules: [{
                                required: true,
                                message: "请输入单价/100",
                                trigger: "blur"
                            }],
                        },
                        {
                            label: "金额",
                            prop: "totalPrice",
                            type: "input",
                            span:8,
                            disabled:true,
                        },
                        {
                            label: "送货日期",
                            prop: "deliDate",
                            type: "date",
                            valueFormat: 'YYYY-MM-DD',
                            format:'YYYY-MM-DD',
                            span:8,
                        },
                        {
                            label: "已生产数量",
                            prop: "prodNum",
                            type: "input",
                            span:8,
                            disabled:true,
                        },
                        {
                            label: "生产已完成",
                            prop: "prodComplete",
                            type: "select",
                            dicUrl: "/blade-system/dict-biz/dictionary?code=biz_yes_no",
                            filterable: true,
                            value:'否',
                            span:8,
                            props: {
                                label: 'dictValue',
                                value: 'dictValue',
                            },
                            dataType: 'string',
                            rules: [{
                                required: false,
                                message: "请选择生产已完成",
                                trigger: "blur"
                            }],
                        },
                        {
                            label: "生产操作人员",
                            prop: "prodCompOpr",
                            type: "input",
                            span:8,
                            disabled:true,
                        },
                        {
                            label: "生产已完成时间",
                            prop: "prodCompDate",
                            type: "input",
                            span:8,
                            disabled:true,
                        },
                        {
                            label: "已入仓数量",
                            prop: "stockNum",
                            type: "input",
                            span:8,
                            disabled:true,
                        },
                        {
                            label: "入仓已完成",
                            prop: "stockComplete",
                            type: "select",
                            dicUrl: "/blade-system/dict-biz/dictionary?code=biz_yes_no",
                            filterable: true,
                            span:8,
                            value:'否',
                            props: {
                                label: 'dictValue',
                                value: 'dictValue',
                            },
                            dataType: 'string',
                            rules: [{
                                required: false,
                                message: "请选择入仓已完成",
                                trigger: "blur"
                            }],
                        },
                        {
                            label: "已送货数量",
                            prop: "deliNum",
                            type: "input",
                            span:8,
                            disabled:true,
                        },
                        {
                            label: "送货已完成",
                            prop: "deliComplete",
                            type: "select",
                            dicUrl: "/blade-system/dict-biz/dictionary?code=biz_yes_no",
                            filterable: true,
                            span:8,
                            value:'否',
                            props: {
                                label: 'dictValue',
                                value: 'dictValue',
                            },
                            dataType: 'string',
                            rules: [{
                                required: false,
                                message: "请选择送货已完成",
                                trigger: "blur"
                            }],
                        },
                        {
                            label: "送货操作人员",
                            prop: "deliCompOpr",
                            type: "input",
                            span:8,
                            disabled:true,
                        },
                        {
                            label: "送货操作时间",
                            prop: "deliCompDate",
                            type: "input",
                            span:8,
                            disabled:true,
                        },
                        {
                            label: "仓存数量",
                            prop: "totalStockNum",
                            type: "input",
                            span:8,
                            disabled:true,
                        },
                        {
                            label: "件数",
                            prop: "pcsCount",
                            type: "input",
                            span:8,
                            disabled:true,
                        },
                        {
                            label: "方数",
                            prop: "cubeNum",
                            type: "input",
                            span:8,
                            disabled:true,
                        },
                        {
                            label: "货代资料",
                            prop: "deliInfo",
                            type: "input",
                            span:8,
                        },
                        {
                            label: "通知方",
                            prop: "noted",
                            type: "input",
                            span:8,
                        },
                        {
                            label: "备注",
                            prop: "remark",
                            type: "textarea",
                            span: 24,
                        },
                    ],
                },
                data: []
            };
        },
        computed: {
            ...mapGetters(["permission"]),
            permissionList() {
                return {
                    addBtn: this.validData(this.permission.order_add, false),
                    viewBtn: this.validData(this.permission.order_view, false),
                    delBtn: this.validData(this.permission.order_delete, false),
                    editBtn: this.validData(this.permission.order_edit, false)
                };
            },
            ids() {
                let ids = [];
                this.selectionList.forEach(ele => {
                    ids.push(ele.id);
                });
                return ids.join(",");
            }
        },
        mounted() {
        },
        methods: {
            saveAddNext() {
              this.$refs.form.submit();
                setTimeout(() => {
                    this.$refs.form.resetFields();
                }, 500);
            },
            saveAdd(){
                this.$refs.form.submit();
                this.$nextTick(() => {
                    this.$refs.modal_1.hide();
                });
            },
            handleTotalPrice(num, price, type) {
                if (num && price) {
                  this.form.totalPrice = this.$toFixed(price/100*num,2);
                }
                if (type === 1 && this.form.maxNum && this.form.maxNum> 0) {
                  this.form.pcsCount = this.$toFixed(num/this.form.maxNum,2);
                  if (this.form.packSize ) {
                      this.form.cubeNum = this.form.pcsCount * this.form.packSize;
                  }
                }

            },
            selectMaterialNo() {
              this.$refs.selectProd.showSelect(this.customerId);
            },
            setProd(row) {
                console.log(row);
              this.form.materialNo = row.materialNo;
              this.form.materialName = row.materialName;
              this.form.materialType = row.specification;
              this.form.barCode = row.barCode;
                this.form.maxNum = row.maxNum;
                this.form.packSize = row.packSize;
                this.form.materialDesc = row.remark;
            },
            onSubmit(form, done) {
                this.$emit("success",form);
                done();
                // this.btnLoading = true;
                // this.form.isConfirm = this.editable ? 1 : 0;
                // update(form).then(res => {
                //     this.btnLoading = false;
                //     done();
                //     if (res.data.success) {
                //         this.$message({
                //             type: "success",
                //             message: res.msg || "保存成功!"
                //         });
                //         setTimeout(() => {
                //             this.$refs.modal_1.hide();
                //         }, 1000)
                //     } else {
                //         this.$message({
                //             type: "error",
                //             message: res.msg || "保存失败!"
                //         });
                //     }
                // }).catch(err => {
                //     console.log(err)
                //     done();
                //     this.btnLoading = false;
                // })
            },
            show(option) {
                console.log("********",this.form.deliDate);
                if (option.id) {
                    setTimeout(() => {
                        getDetail(option.id).then(res => {
                            if (res.data.success) {
                                this.form = res.data.data;
                                this.$refs.orderItem.setData(this.form.idNo);
                                // this.form.taxRate = Number(this.form.taxRate)
                                // this.findObject(this.option.column, 'createUserName').display = true;
                                // this.findObject(this.option.column, 'createTime').display = true;
                            }
                        })
                    }, 500);
                } else {
                    this.form = {}
                    // this.findObject(this.option.column, 'createUserName').display = false;
                    // this.findObject(this.option.column, 'createTime').display = false;
                    let now = new Date();
                    now.setDate(now.getDate()+14);
                    this.form.deliDate = dateFormat(now,"yyyy-MM-dd")
                }

                this.title = option.title;
                this.type = option.type;
                this.option.detail = this.type === "view";
                this.editable = this.type !== "view";
                this.$refs.modal_1.show();
            },
            showWithData(option) {

                console.log(this.form.deliDate);
                this.form =option.row;
                this.title = option.title;
                this.type = option.type;
                this.option.detail = this.type === "view";
                this.editable = this.type !== "view";
                this.$refs.modal_1.show();
            },
            rowDel(row) {
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        return remove(row.id);
                    })
                    .then(() => {
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        });
                    });
            },
            handleDelete() {
                if (this.selectionList.length === 0) {
                    this.$message.warning("请选择至少一条数据");
                    return;
                }
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        return remove(this.ids);
                    })
                    .then(() => {
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        });
                        this.$refs.crud.toggleSelection();
                    });
            },
            beforeOpen(done, type) {
                if (["edit", "view"].includes(type)) {
                    getDetail(this.form.id).then(res => {
                        this.form = res.data.data;
                    });
                }
                done();
            },
            opened() {
                console.log("opened")
            },
            closed() {
                // this.$emit("success");
            }
        }
    };
</script>

<style>
  /*.addPadding {*/
    /*padding: 20px !important;*/
  /*}*/
</style>
